﻿<template>
    <div class="container" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label prop="name">
                            <el-input v-model="queryBox.activityCode" placeholder="请输入内容">
                                <template slot="prepend">活动编码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="name">
                            <el-input v-model="queryBox.activityName" placeholder="请输入内容">
                                <template slot="prepend">活动名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
        </div>
        <div class="add-btns fl">
            <kt-button
                :label="$t('新增')"
                type="primary"
                perms="ActivityManage:Activity:add"
                @click="handleNewADD"
            ></kt-button>
        </div>
        <!--表格内容栏-->
        <div class="btns">
            <Crm-table
                class="table-width"
                activityManage
                width="400"
                permsSee="customer:xuecoo:see"
                permsEdit="customer:xuecoo:edit"
                permsDelete="activityManage:activity:delete"
                :data="pageResult"
                :columns="columns"
                :loading="loading"
                @findPage="findPage"
                @generateSubLink="generateSubLink"
                @onError="onError"
                @onCopy="onCopy"
                @handleDeleteDic="handleDelete"
                @handleUp="handleUp"
                :showBatchDelete="false"
            ></Crm-table>
        </div>
        <!--新增界面-->
        <el-dialog
            title="新增活动链接"
            class="query-box"
            width="40%"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
        >
            <el-form :model="addBox" ref="addBox">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label prop="name">
                            <el-input v-model="addBox.activityCode" placeholder="请输入内容">
                                <template slot="prepend">活动编码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11" style="margin-left: 4%;">
                        <el-form-item label prop="name">
                            <el-input v-model="addBox.activityName" placeholder="请输入内容">
                                <template slot="prepend">活动名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="23">
                        <div class="depart-box">
                            <div class="slect-title">有效期</div>
                            <el-date-picker
                                v-model="assignDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top:22px;">
                    <el-col :span="23">
                        <div class="depart-box">
                            <div class="slect-title">活动连接</div>
                            <el-input v-model="addBox.activityLink" placeholder="请输入内容"></el-input>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" style="text-align:center" class="dialog-footer">
                <el-button
                    :size="size"
                    @click.native="dialogVisible = false"
                >{{ $t("action.cancel") }}</el-button>
                <el-button
                    :size="size"
                    type="primary"
                    @click.native="submitAdd"
                    :loading="editLoading"
                >{{ $t("action.submit") }}</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="上传海报"
            class="query-box"
            width="40%"
            :visible.sync="upload"
            :close-on-click-modal="false"
        >
            <el-form :model="uploadData">
                <el-form-item label="活动编码" style="margin: 20px 0;">
                    <el-input
                        v-model="uploadData.activityCode"
                        auto-complete="off"
                        :disabled="true"
                        style="width: 70%;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="二维码位置" style="margin: 20px 0;">
                    <el-select clearable filterable v-model="uploadData.position" style="width:70%">
                        <el-option
                            v-for="item in QRcodePlaceOption"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-upload
                v-if="upload"
                class="upload-demo"
                accept=".jpg, .png"
                :action="uploadUrl"
                :limit="1"
                :on-success="handleAvatarSuccess"
                :with-credentials="true"
            >
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div slot="footer" style="text-align:center" class="dialog-footer">
                <el-button
                    :size="size"
                    @click.native="upload = false"
                >{{ $t("action.cancel") }}</el-button>
                <el-button
                    :size="size"
                    type="primary"
                    @click.native="submitUploadAdd"
                    :loading="editLoading"
                >{{ $t("action.submit") }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";

import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    name: "Xuecoo",
    components: {
        CrmTable,
        KtButton
    },
    data() {
        return {
            uploadUrl: baseUrl + "/mediaInfo/upload",
            size: "mini",
            uploadData: "",
            uploadSubmitData:'',
            editLoading: false,
            queryBox: {},
            addBox: {
                startDate: "",
                endDate: ""
            },
            upload: false,
            assignDate: "",
            mytime: "",
            dialogVisible: false, // 新增界面是否显示
            width: 200,
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "activityCode", label: "活动编码", minWidth: 120 },
                { prop: "activityName", label: "活动名称", minWidth: 100 },
                { prop: "effectiveDate2", label: "有效期", minWidth: 190 },
                { prop: "activityLink", label: "链接地址", minWidth: 100 },
                { prop: "createDate", label: "创建时间", minWidth: 70 },
                { prop: "stateInfo", label: "停启状态", minWidth: 50 },
                { prop: "statusInfo", label: "状态", minWidth: 120 }
            ],
            pageRequest: { pageNum: 1, pageSize: 10 },
            pageResult: {
                content: []
            },
            // 限制跟进时间
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
            loading: false, // 加载标识
            QRcodePlaceOption:[],

        };
    },
    methods: {
        // 搜索
        search() {
            this.loading = true;
            this.pageRequest.pageNum = 1;
            this.findPage(null);
        },
        handleChange(value) {},
        get_dataTime() {
            let dateTime = new Date();
            // this.saveData.contractDate = this.dateFormat(dateTime);
            let mytime = dateTime.toLocaleTimeString("chinese", {
                hour12: false
            }); //获取当前时间
            this.mytime = mytime;
            // 二维码位置
            this.$api.user
                .optionsList({ codeType: "QRcode_place" })
                .then(res => {
                    this.QRcodePlaceOption = res.keyValueList;
                });
        },
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }
            this.queryBox.pageSize = this.pageRequest.pageSize;
            this.queryBox.pageNum = this.pageRequest.pageNum;
            this.$api.agent
                .getActivityManage(this.queryBox)
                .then(res => {
                    if (res.result == 2) {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    } else {
                        let content = {
                            content: res.activityManagerList,
                            totalSize: res.total
                        };
                        this.pageResult = content;
                        this.pageResult.content.forEach(item => {
                            // 转换状态
                            if (item.status == 1) {
                                item.statusInfo = "已生成分中心子链接";
                            } else {
                                item.statusInfo = "未生成分中心子链接";
                            }
                            //转换停启状态
                            switch (item.state) {
                                case 1:
                                    item.stateInfo = "启用";
                                    break;
                                case 2:
                                    item.stateInfo = "停用";
                                    break;
                                case null:
                                    item.stateInfo = "未知";
                                    break;
                            }
                            // 计算有效期
                            item.effectiveDate =
                                this.DateMinus(item.startDate, item.endDate) +
                                "天";
                            // 有效时间段
                            item.effectiveDate2 =
                                item.startDate == null && item.endDate == null
                                    ? ""
                                    : item.startDate + "至" + item.endDate;
                        });
                        this.loading = false;
                    }
                })
                .then(data != null ? data.callback : "");
        },
        DateMinus(date1, date2) {
            //date1:小日期   date2:大日期
            var sdate = new Date(date1);
            var now = new Date(date2);
            var days = now.getTime() - sdate.getTime();
            var day = parseInt(days / (1000 * 60 * 60 * 24));
            return day;
        },
        // 生成子链接
        generateSubLink(params) {
            this.$api.agent
                .generateSubLink({ activityId: params.row.id })
                .then(res => {
                    if (res.result == 1) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        params.row.status = 1;
                        if (params.row.status == 1) {
                            params.row.statusInfo = "已生成分中心子链接";
                        } else {
                            params.row.statusInfo = "未生成分中心子链接";
                        }
                        // this.findPage(null)
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                });
        },

        // 重置
        reset(queryBox) {
            this.queryBox.activityCode = "";
            this.queryBox.activityName = "";
            this.findPage(null);
        },
        onCopy(params) {
            this.$message({
                message: "复制成功" + params.text,
                type: "success"
            });
        },
        onError(params) {
            this.$message({
                message: "复制失败",
                type: "error"
            });
        },
        handleNewADD() {
            this.dialogVisible = true;
        },
        submitAdd() {
            this.editLoading = true;
            let params = Object.assign({}, this.addBox);
            this.addBox.startDate = this.assignDate[0];
            this.addBox.endDate = this.assignDate[1];
            this.$api.agent.saveOrUpdateActivityInfo(this.addBox).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                    this.$message({ message: "操作成功", type: "success" });
                    this.dialogVisible = false;
                    this.$refs["addBox"].resetFields();
                    this.assignDate = "";
                    this.addBox.startDate = "";
                    this.addBox.endDate = "";
                    this.addBox.activityCode = "";
                    this.addBox.activityName = "";
                    this.addBox.activityLink = "";
                } else {
                    this.$message({
                        message: "操作失败, " + res.msg,
                        type: "error"
                    });
                }
                this.findPage(null);
            });
        },
        handleAvatarSuccess(res,file){
            this.uploadData.posterUrl=res.msg
        },
        // 海报提交
        submitUploadAdd(){
          this.editLoading=true
          this.uploadData.activityId=this.uploadData.id
          this.$api.agent.savePosterInfo(this.uploadData).then(res=>{
            if(res.result==2){
              this.$message.error(res.msg)
            }else{
              this.$message.success('上传成功！')
              this.upload=false
              
            }
            this.editLoading=false
          })
          
        },
        handleDelete(params) {
            this.$api.agent
                .deleteActivityInfo({ activityId: params.row.id })
                .then(res => {
                    if (res.result == 1) {
                        this.$message({ message: "操作成功", type: "success" });
                    } else {
                        this.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                    this.findPage(null);
                });
        },
        // 上传海报
        handleUp(params) {
            this.uploadData = params.row;
            this.upload = true;
        }
    },
    mounted() {
        this.get_dataTime();
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.checked-person {
    font-weight: 500;
    display: inline-block;
    text-align: center;
    margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    color: #303133;
}
.el-dialog__wrapper .el-form-item__content {
    margin-left: 0;
}
.demo-form-inline {
    width: 90%;
    margin: 0 auto;
    .el-dialog__body .el-input {
        width: 93% !important;
    }
    .el-select {
        width: 100% !important;
    }
    .tit {
        display: inline-block;
        margin-top: 10%;
    }
}
.btn .el-button {
    padding: 9px 5px !important;
}
</style>
<style>
.batchdistribution-pop .el-dialog__header {
    padding: 0 0 0 0 !important;
}
</style>
